<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main id="legend" style="position:absolute;left:15px;top:15px;width:280px;height:auto;box-shadow:0 0 5px white">
        </el-main>
    </div>
</template>
   
<script setup>
    import {onMounted,ref} from 'vue'
    import Map from '@arcgis/core/Map'
    import MapView from '@arcgis/core/views/MapView'
    import * as queryClass from '@arcgis/core/rest/query'
    import Query from '@arcgis/core/rest/support/Query'
    import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
    import Legend from '@arcgis/core/widgets/Legend'
    var map,view,query,featureLayer,legend
    onMounted(()=>{
        featureLayer=new FeatureLayer({
            url:"https://ws8575.club/web/rest/services/Hosted/山东省市界_玉米小麦大米产量_面要素_要素图层_3857/FeatureServer/0",
            title:"山东省三种农作物产量",
            renderer:{
                type:"pie-chart",
                attributes: [{
                    field: "大米",
                    color: [200,50,50]
                }, {
                    field: "小麦",
                    color: [50,200,50]
                }, {
                    field: "玉米",
                    color: [50,50,200]
                }],
                outline:{
                    width:1,
                    color:[255,255,255]
                },
                size:25,
                backgroundFillSymbol:{
                    color: [0,0,0,0.2],
                    outline: {
                        width: 1,
                        color: [1,1,1]
                    }
                },
                visualVariables:[{
                    type:"size",
                    valueExpression:`$feature.大米+$feature.小麦+$feature.玉米`,
                    minDataValue: 70000,//小于该值的归为一类
                    maxDataValue: 150000,//大于该值的归为一类
                    minSize: 15,//对应值最小的一类的尺寸
                    maxSize:30//对应值最大的一类的尺寸
                }]
            },
            labelingInfo:[{
                labelExpressionInfo:{
                    expression:`"玉米产量:"+$feature.玉米+TextFormatting.NewLine+"小麦产量:"+$feature.小麦+TextFormatting.NewLine+"大米产量:"+$feature.大米`
                },
                symbol:{
                    type:"text",
                    color:[255,255,255],
                    size:13,
                    haloColor:[50,50,50],
                    haloSize:1,
                    xoffset:50
                },
                minScale:2000000
            }]
        })
        map=new Map({
            basemap:"satellite",
            layers:[featureLayer]
        })
        view=new MapView({
            map:map,
            container:"viewDiv",
            center:[118.4,36.1],
            zoom:7,
            constraints:{
                rotationEnabled:false,
                maxScale:2000
            }
        })
        view.ui.remove(["zoom","attribution"])
        legend=new Legend({
            view:view,
            container:"legend"
        })
    })
</script>

<style scoped>
#container,#viewDiv{
  width:100%; height:100%; padding:0;margin:0;
}
span{
    vertical-align: middle;
    white-space: pre-line;
}
</style>
